<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品详情</title>
    <link rel="stylesheet" href="./iconfont2/iconfont.css" />
    <link rel="stylesheet" href="./iconfont3/iconfont.css" />
    <link rel="stylesheet" href="./swiper/swiper.min.css" />
    <link rel="stylesheet" href="./css/pubic.css" />
    <link rel="stylesheet" href="./css/shangpin.css" />
  </head>
  <body>
    <div class="header">
      <i class="iconfont arrow-left icon-arrow-left"></i> 商品详情页
    </div>
    <div class="main">
      <!-- 轮播图 -->
      <div class="show">
        <div class="swiper-container">
          <div class="swiper-wrapper"></div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- 内容说明 -->
      <div class="introduce"></div>
      <div class="inform">
        <span>
          <span><i class="iconfont icon-duihao"></i> 七天无理由退货</span>
          <span><i class="iconfont icon-duihao"></i> 48小时发货</span>
        </span>
        <span class="iconfont icon-jiantou"></span>
      </div>
      <!-- 评论 -->
      <div class="comment">
        <div class="comment_top">
          <div class="ping">商品评价（5）条</div>
          <div class="cha">查看更多<i class="iconfont icon-jiantou"></i></div>
        </div>
        <div class="comment_bottom">
          <div class="comment_box">
            <!-- <div class="comment_name">
              <div>
                <img
                  src="http://cba.itlike.com/public/uploads/10001/20230321/a0db9adb2e666a65bc8dd133fbed7834.png"
                  alt=""
                /><span class="username">股神不死</span
                ><span class="xingxing">❤ ❤ ❤ ❤ ❤</span>
              </div>
              <p>质量很不错 挺喜欢的</p>
              <p>2023-03-21 15:02:52</p>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 商品描述 -->
      <div class="content"></div>
      <!-- 遮罩层和提示 -->
      <div class="mask" style="display: none"></div>
      <div class="tishi" style="display: none">
        <p class="wen">温馨提示</p>
        <p class="deng">你还没有登录喔~</p>
        <div class="btn_deng">
          <button class="btn_hui">再逛会</button
          ><button class="btn_qu">去登录</button>
        </div>
      </div>
    </div>

    <div class="footer">
      <a class="footer_a">
        <span class="iconfont icon-line-mailopenyoujiandakai"></span>
        <p>首页</p>
      </a>
      <a class="footer_c">
        <span class="iconfont icon-gouwuchekong"></span>
        <p>购物车</p>
      </a>

      <div class="jia">加入购物车</div>
      <div class="li">立即购买</div>
    </div>
    <script src="./swiper/swiper.min.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/shangpin.js"></script>
    <script>
      var swiper = new Swiper('.swiper-container', {
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        loop: true,
        autoplayDisableOnInteraction: false,
      })
    </script>
  </body>
</html>
